<template>
  <div>
    <a-card>
      <a-row style="margin-bottom: 10px">
        <a-col :span="24"  style="display: flex;flex-direction: row-reverse">
          <a-button v-print="'#printReport'" type="primary">打印报表</a-button>
        </a-col>
      </a-row>
      <div id="printReport">
        <table border="1" cellPadding="5" cellSpacing="0" bordercolor="#000" style="width: 100%">
          <tr>
            <th colspan="11">
              <div style="position: relative;text-align: center">
                <img src="@/assets/reportIcon.png" width="100px" height="30px" style="position: absolute;left: 0px;top:-5px"/>
                <span>出货检验报告</span>
              </div>
            </th>
          </tr>
          <tr>
            <td align="center" style="width: 10%">客户名称</td>
            <td colspan="10">{{reportData.customerName}}</td>
          </tr>
          <tr>
            <td align="center">订单号</td>
            <td colspan="3" style="width: 30%">{{reportData.orderNum}}</td>
            <td align="center">产品型号</td>
            <td colspan="2" style="width: 20%">{{reportData.productNum}}</td>
            <td align="center">订单数量</td>
            <td colspan="3" style="width: 30%">{{reportData.orderCount}}</td>
          </tr>
          <tr>
            <td align="center">本批数量</td>
            <td colspan="3">{{reportData.thisCount}}</td>
            <td align="center">抽验数量</td>
            <td colspan="2">{{reportData.samplingCount}}</td>
            <td align="center">检验日期</td>
            <td colspan="3">{{reportData.inspectDay}}</td>
          </tr>
          <tr>
            <td align="center">检验依据</td>
            <td colspan="10">
              <div style="display:flex;justify-content: space-around">
                <a-radio-group v-model="reportData.inspectBasis" :options="checkedList" disabled/>
              </div>
            </td>
          </tr>
          <tr>
            <td align="center">抽样方案</td>
            <td colspan="10">
              {{reportData.samplingPlan}}
            </td>
          </tr>
          <tr v-for="item in reportData.mesBodLogList">
            <td align="center">不良现象</td>
            <td align="center" v-for="i in item" style="width: 9%">{{i.bodName}}</td>
            <td align="center" v-for="i in (10-item.length)" style="width: 9%"></td>
          </tr>
          <tr v-for="item in reportData.mesBodLogList">
            <td align="center">数量</td>
            <td align="center" v-for="i in item" style="width: 9%">{{i.bodNum}}</td>
            <td align="center" v-for="i in (10-item.length)" style="width: 9%"></td>
          </tr>

<!--          <tr>-->
<!--            <td align="center">不良现象</td>-->
<!--            <td align="center">侧立</td>-->
<!--            <td align="center">浮高</td>-->
<!--            <td align="center">损件</td>-->
<!--            <td align="center">偏移</td>-->
<!--            <td align="center">少锡</td>-->
<!--            <td align="center">多件</td>-->
<!--            <td align="center">变形</td>-->
<!--            <td align="center">针孔</td>-->
<!--            <td align="center">锡珠</td>-->
<!--            <td align="center">立碑</td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td align="center">数量</td>-->
<!--            <td align="center"></td>-->
<!--            <td align="center"></td>-->
<!--            <td align="center"></td>-->
<!--            <td align="center"></td>-->
<!--            <td align="center"></td>-->
<!--            <td align="center"></td>-->
<!--            <td align="center"></td>-->
<!--            <td align="center"></td>-->
<!--            <td align="center"></td>-->
<!--            <td align="center"></td>-->
<!--          </tr>-->
          <tr>
            <td colspan="11">
              <div style="display:flex;">
                <span style="width: 200px">外观检验：</span>
                <a-radio-group v-model="reportData.inspectExterior" :options="list" disabled/>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="11">
              <div style="display:flex;">
                <span style="width: 200px">功能测试：</span>
                <a-radio-group v-model="reportData.inspectFunction" :options="list" disabled/>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="11">
              <div style="display:flex;">
                <span style="width: 200px">尺寸规格与包装：</span>
                <a-radio-group v-model="reportData.inspectSpec" :options="list" disabled/>
              </div>
            </td>
          </tr>
<!--          <tr>-->
<!--            <td colspan="11">其他不良现象及数量：</td>-->
<!--          </tr>-->
          <tr>
            <td colspan="11">备注说明：{{reportData.badDesc}}</td>
          </tr>
          <tr>
            <td>不良品数量</td>
            <td colspan="4">{{reportData.badNum}}</td>
            <td>不良品率</td>
            <td colspan="5">{{reportData.badRate}}</td>
          </tr>
          <tr>
            <td>检验结论</td>
            <td colspan="4">
              <div style="display:flex;justify-content: space-around">
                <a-radio-group v-model="reportData.inspectVerdict" :options="list" disabled/>
              </div>
            </td>
            <td colspan="6"></td>
          </tr>
          <tr>
            <td>检验员</td>
            <td colspan="4">{{reportData.inspectMan}}</td>
            <td>审核</td>
            <td colspan="5"></td>
          </tr>
          <tr>
            <td colspan="11" align="center">不良问题处理（检验不合格时使用）</td>
          </tr>
          <tr>
            <td rowspan="2">问题确认及受理</td>
            <td colspan="2">确认及受理人</td>
            <td colspan="2">{{reportData.acceptMan}}</td>
            <td colspan="2" align="center">确认及受理时间</td>
            <td colspan="4">{{reportData.acceptTime}}</td>
          </tr>
          <tr>
            <td colspan="2">原因分析及处理措施</td>
            <td colspan="8">{{reportData.causeAnalysis}}</td>
          </tr>
          <tr>
            <td rowspan="2">效果确认</td>
            <td colspan="2">效果确认及描述</td>
            <td colspan="8">{{reportData.effectDesc}}</td>
          </tr>
          <tr>
            <td>确认人</td>
            <td colspan="3">{{reportData.confirmedBy}}</td>
            <td>确认时间</td>
            <td colspan="5">{{reportData.confirmedTime}}</td>
          </tr>
        </table>
        <div style="display: flex;justify-content: space-between">
          <div>文件编号:YZY-QRQC-087</div>
          <div>保存期限:1年</div>
          <div>版本:1.0</div>
        </div>
      </div>
    </a-card>
  </div>
</template>


<script>
export default {
  /** 出货检验报告 **/
  name: 'OutgoingInspectionReport',
  props:{
    reportData:{
      type:Object,
      default:()=>{}
    }
  },
  data(){
    return {
      checkedList:[
        { label: 'PCBA外观检验通用规范', value: 'PCBA外观检验通用规范' },
        { label: '本批首样', value: '本批首样' },
        { label: '客户特殊要求', value: '客户特殊要求' },
        { label: '其他', value: '其他' },
      ],
      list:[
        { label: '合格', value: 'true' },
        { label: '不合格', value: 'false' },
      ]
    }
  }
}
</script>

<style scoped>

</style>